<template>
  <div>
    <!-- 头部开始 -->
    <div style="height:60px; background-color: #409eff; display: flex; align-items: center;">
       <div style="width: 400px;display: flex; align-items: center;font-size: 20px; color: white;margin-left: 20px">
         <img src="@/assets/images/apple.png" alt="" style="width: 45px;height: 45px;"/>
         <span style="margin-top:5px;margin-left:20px;font-size:24px">数码资讯网站后台管理系统</span>
       </div>
       <div style="flex:1"></div>
       <div style="width:fit-content;display: flex;align-content: center;padding-right: 10px">
<!--         <el-avatar :size="50" :src="data.circleUrl" />-->
<!--         <span style="color:white;margin-left: 10px;margin-top:15px">用户</span>-->
         <img :src="data.circleUrl" style="width:40px;height:40px" alt="">
         <span style="color:white;margin-left: 10px;margin-top:10px;">用户</span>
       </div>
    </div>
    <!-- 头部结束 -->


    <!-- 下面部分开始 -->
    <div style="display: flex;">
      <!-- 左侧导航菜单开始 -->
      <div style="width: 200px; border-right: 1px solid #dddddd; min-height: calc(100vh - 60px)">
        <el-menu router :default-active="router.currentRoute.value.path" :default-openeds="['1']" style="border: 0">
          <el-menu-item index="/manager/home">
            <el-icon><House /></el-icon>
            系统首页
          </el-menu-item>

          <el-sub-menu index="1">
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item>管理员信息</el-menu-item>
            <el-menu-item index="/manager/employee">
              员工信息
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/manager/data">
            <el-icon><DataAnalysis /></el-icon>
            数据处理
          </el-menu-item>
          <el-menu-item index="/manager/person">
            <el-icon><UserFilled /></el-icon>
            个人信息
          </el-menu-item>
          <el-menu-item>
            <el-icon><SwitchButton /></el-icon>
            退出登录
          </el-menu-item>

        </el-menu>
      </div>
      <!-- 左侧导航菜单结束 -->

      <!--右侧主体区域开始-->
      <div style="flex: 1; width: 0; background-color: #f4f3f3; padding: 10px">
        <RouterView />
      </div>
      <!-- 右侧主体区域结束 -->




    </div>
    <!--  下面部分结束 -->
  </div>
</template>
<script setup>
import router from "@/router/index.js";

const data = {
  circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
}
</script>

<style scoped>
  .el-menu .is-active{
    background-color: #e6ecf7;
  }
</style>